<template>
  <transition name="fade-slide">
    <div class="x-nav">
      <div class="x-nav--main">
        <div class="x-header">
          <div class="x-header--wrap clearfix">
            <router-link to="/" class="x-logo">
              <img src="../assets/logo_white.png" alt="LOGO" width="125" height="32">
            </router-link>

            <div class="x-menu">
              <span class="menu-icon--link" @click="back($event)" title="关闭">
                <i class="menu-icon"></i>
              </span>
            </div>
          </div>
        </div>
        <div class="nav--list__wrap">
          <ul class="nav--list clearfix">
            <li class="item" v-for="item in nav">
              <div :class="{'item-inner': true, active: item.active}"
                @click="goNav(item.name)">
                <p class="item__topic">{{ item.topic }}</p>
                <p class="item__address">{{ item.address }}</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="mask mask__1"></div>
      </div>
      <x-footer></x-footer>
    </div>
  </transition>
</template>

<script>
  import XFooter from '@/components/XFooter'
  import { navConfig } from '../config/nav.config'
  import $ from 'jquery'

  export default {
    components: {
      XFooter
    },
    data() {
      return {
        current: '', // 之前的路由 name
        nav: []
      }
    },
    mounted() {
      const route = this.$route
      const routeName = route.name
      let params = route.params
      // 默认就会去 home
      this.current = params.current || ''

      navConfig.forEach(config => {
        if(this.current.indexOf(config.name) !== -1) {
          config.active = true
        } else {
          config.active = false
        }
      })

      this.nav = navConfig

      $(window).scrollTop(0)
    },
    methods: {
      back(e) {
        this.current = this.current ? this.current : 'app'
        this.$router.push({
          name: this.current,
        })
      },
      goNav(name) {
        name = name ? name : 'app'
        this.$router.push({
          name,
        })
      }
    }
  }

</script>

<style lang="scss" scoped>
  .fade-slide-enter-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform .6s, opacity .3s;
  }
  .fade-slide-enter {
    opacity: 0;
    transform: translate3d(0, -80%, 0);
    transition: transform .6s, opacity .3s;
  }
  .fade-slide-leave {
    opacity: 1;
    transition: all .3s;
  }
  .fade-slide-leave-active {
    opacity: 0;
    transition: all .3s;
  }

  .x-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-sizing: border-box;
    border-top: 4px solid maroon;
  }

  .x-header--wrap {
    max-width: 1920px;
    margin: 0 auto;
    padding: 15px 30px;
  }

  /* logo */
  .x-logo {
    float: left;
  }

  .x-menu {
    float: right;
    line-height: 32px;
  }

  .x-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    .menu-icon--link {
      cursor: pointer;
      display: block;
      width: 26px;
      height: 26px;
      border: 1px #fff solid;
      box-sizing: border-box;

      position: relative;
    }
    .menu-icon {
      display: block;
      width: 15px;
      height: 15px;
      background: url("../assets/menu_close.png") 0 0 no-repeat;

      position: absolute;
      top: 5px;
      left: 4px;
    }
  }
  .x-nav--main {
    position: relative;
    width: 100%;
    height: calc(100% - 244px); // footer 244px
    background: url("../assets/main_header_prop_up_bg.jpg") 50% no-repeat;
    background-size: cover;
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .mask__1 {
      background: rgba(41, 46, 60, .8);
    }
  }

  .nav--list__wrap {
    text-align: center;
    height: 258px;
    position: relative;
    z-index: 100;
    top: 240px;
  }
  .nav--list {
    display: inline-block;
    .item {
      float: left;
      margin-left: 33px;
      &:first-child {
        margin-left: 0;
      }
    }
    .item-inner {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      width: 258px;
      height: 258px;
      border-radius: 50%;
      background: #353038;
      color: #0a0200;
      overflow: hidden;
      transition: all .3s;

      &:hover,
      &.active {
        background: #fff;
        color: #800000;
      }
    }
    .item__topic {
      font-size: 45px;
      font-weight: 700;
      font-family: Montserrat;
    }
    .item__address {
      font-size: 26px;
    }
  }

  @media only screen and (max-width: 1500px) {
    .nav--list__wrap{
      top: 30%;
    }
  }
  @media only screen and (max-width: 1441px) {
    .nav--list {
      .item-inner {
        width: 200px;
        height: 200px;
      }
      .item__topic{
        font-size: 30px;
      }
    }
  }
</style>
